<template>
	<div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="渠道码" prop="channelCode">
			</el-table-column>
			<el-table-column label="落地页码" prop="landinCode">
			</el-table-column>
			<el-table-column label="访问量" prop="landinCount">
			</el-table-column>
			<el-table-column label="扣量比例">
				<template slot-scope="scope">
					<el-input v-model="scope.row.deductionRate" @change="updateDeduction(scope.row)"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="扣量地址">
				<template slot-scope="scope">
					<el-input v-model="scope.row.deductionUrl" @change="updateDeduction(scope.row)"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="扣量开关">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.isDeduction" active-text="开启" inactive-text="关闭" @change="updateDeduction(scope.row)">
					</el-switch>
				</template>
			</el-table-column>
		</el-table>
		<el-row style="height: 80px;">
			当前页数：{{page}}
			<el-button type="primary" size="small" :disabled="page==1" @click="changePage(0)">上一页</el-button>
			<el-button type="primary" size="small" :disabled="pageOver" @click="changePage(1)">下一页</el-button>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				count: 10,
				tableData: [],
				search: '',
				page: 1,
				landinVerList: this.$constData.landinVerList,
				pageOver: true
			}
		},
		methods: {
			// 修改落地页扣量信息
			updateDeduction(info) {
				console.log(info)
				let cnt = {
					channelCode: info.channelCode,
					landinCode: info.landinCode,
					deductionRate: info.deductionRate,
					deductionUrl: info.deductionUrl,
					isDeduction: info.isDeduction
				}
				this.$api.updateDeduction(cnt, (res) => {
					if (res.data.rc == this.$util.RC.SUCCESS) {
						this.$message({
							type: 'success',
							message: '修改成功!'
						});
					}else {
						this.$message.error('修改失败');
					}
				})
			},
			// 获取落地页列表
			getDeductionList() {
				let cnt = {
					count: this.count,
					offset: (this.page - 1) * this.count
				}
				this.$api.getDeductionList(cnt, (res) => {
					if (res.data.rc == this.$util.RC.SUCCESS) {
						this.tableData = this.$util.tryParseJson(res.data.c)
						console.log(this.tableData)
						this.loading = false
					} else {
						this.tableData = []
					}
					if (this.tableData.length < this.count) {
						this.pageOver = true
					} else {
						this.pageOver = false
					}
				})
			},
			// 翻页
			changePage(e) {
				this.loading = true
				if (e) {
					console.log(e)
					this.page += 1
				} else {
					console.log(e)
					this.page -= 1
				}
				localStorage.setItem("page_contentList", this.page)
				// 获取落地页列表
				this.getDeductionList()
			},
		},
		mounted() {
			this.getDeductionList()
		}
	}
</script>

<style>
</style>
